<template>
  <div :style="{ width: parentWidth + 'rem', height: parentHeight + 'rem' }">
    <div class="slideshow">
      <div v-for="(slide, index) in slides" :key="index" class="slide"
        :style="{ opacity: currentIndex === index ? 1 : 0 }">
        <slot :name="'slide-' + index"></slot>
      </div>
    </div>
    <div class="indicators">
      <span v-for="(slide, index) in slides" :key="index" :class="{ active: currentIndex === index }"
        @click="goToSlide(index)"></span>
    </div>
  </div>
</template>


<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  props: {
    parentWidth: {
      type: Number,
      required: true
    },
    parentHeight: {
      type: Number,
      required: true
    },
    slides: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    const currentIndex = ref(0);
    let intervalId = null;

    const startAutoplay = () => {
      intervalId = setInterval(() => {
        nextSlide();
      }, 3000);
    };

    const stopAutoplay = () => {
      clearInterval(intervalId);
    };

    const nextSlide = () => {
      if (currentIndex.value === props.slides.length - 1) {
        currentIndex.value = 0;
      } else {
        currentIndex.value++;
      }
    };

    const goToSlide = (index) => {
      currentIndex.value = index;
    };

    onMounted(() => {
      startAutoplay();
    });

    onBeforeUnmount(() => {
      stopAutoplay();
    });

    return {
      currentIndex,
      goToSlide
    };
  }
};
</script>

<style lang="less" scoped>
.slideshow {
  width: 100%;
  height: 100%;
  // overflow: hidden;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s;
}

.indicators {
  display: flex;
  justify-content: center;
  margin-top: .5rem;
}

.indicators span {
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 .3125rem;
  cursor: pointer;
}

.indicators span.active {
  background-color: #000;
}
</style>
